<template>
  <div class="tac mt100 mr20">
    <div class="fz18 fw" style="margin-top: -20px">{{ props.title }}</div>
    <div :id="props.id" style="width: 300px; height: 300px"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from "vue";
import * as echarts from "echarts";
const props = defineProps({
  id: {
    type: String,
    default: null, //默认值
  },
  title: {
    type: String,
    default: null, //默认值
    required: true, //是否必须传递
  },
  subtitle: {
    type: String,
    default: null, //默认值
    required: true, //是否必须传递
  },
  value: {
    type: Number,
    default: null, //默认值
    required: true, //是否必须传递
  },
});
let echart = echarts;
let value = ref();
let subtitle = ref();
let title = ref();
onMounted(() => {
  initChart();
});
function initChart() {
  let chart = echart.init(document.getElementById(props.id));
  // 把配置和数据放这里
  value.value = props.value;
  subtitle.value = props.subtitle;
  chart.setOption({
    // backgroundColor: "000",
    title: {
      text: `${value.value}`,
      subtext: `${subtitle.value}`,
      left: "center",
      top: "center", //top待调整
      textStyle: {
        color: "#fff",
        fontSize: 30,
        fontFamily: "DINAlternate-Bold",
      },
      subtextStyle: {
        color: "#fff",
        fontSize: 20,
        fontFamily: "PingFangSC-Regular",
        top: "center",
      },
      itemGap: -4, //主副标题间距
    },
    xAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      // 内圆
      {
        type: "pie",
        radius: ["0", "50%"],
        center: ["50%", "50%"],
        z: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#1147A1",
              },
              {
                offset: 0.5,
                color: "#423DB3",
              },
              {
                offset: 1,
                color: "#1147A1",
              },
            ]),
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        label: {
          normal: {
            position: "center",
          },
        },
        data: [100],
      },
      // 进度圈
      {
        type: "pie",
        clockWise: true,
        radius: ["60%", "55%"],
        data: [
          {
            value: value.value,
            itemStyle: {
              normal: {
                borderWidth: 10,
                borderColor: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#7940FE" || "#00cefc", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2A69EC" || "#367bec", // 100% 处的颜色
                    },
                  ],
                },
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: "#7940FE" || "#00cefc", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2A69EC" || "#367bec", // 100% 处的颜色
                    },
                  ],
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
          {
            value: 100 - value.value,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          },
        ],
      },
      //刻度尺
      // {
      //   // name: "白色圈刻度",
      //   type: "gauge",
      //   radius: "67%",
      //   startAngle: 225, //刻度起始
      //   endAngle: -134.8, //刻度结束
      //   z: 4,
      //   axisTick: {
      //     show: true,
      //     lineStyle: {
      //       width: 2,
      //       color: "rgba(1,244,255, 0.9)",
      //     },
      //   },
      //   splitLine: {
      //     length: 16, //刻度节点线长度
      //     lineStyle: {
      //       width: 2,
      //       color: "rgba(1,244,255, 0.9)",
      //     }, //刻度节点线
      //   },
      //   axisLabel: {
      //     color: "rgba(255,255,255,0)",
      //     fontSize: 12,
      //   }, //刻度节点文字颜色
      //   pointer: {
      //     show: false,
      //   },
      //   axisLine: {
      //     lineStyle: {
      //       opacity: 0,
      //     },
      //   },
      //   detail: {
      //     show: false,
      //   },
      //   data: [
      //     {
      //       value: 0,
      //       name: "",
      //     },
      //   ],
      // },
      // 刻度圈
      // {
      //   type: "pie",
      //   radius: ["0%", "73%"],
      //   center: ["50%", "50%"],
      //   avoidLabelOverlap: false,
      //   label: {
      //     normal: {
      //       show: false,
      //       position: "center",
      //     },
      //     emphasis: {
      //       show: false,
      //       textStyle: {
      //         fontWeight: "bold",
      //       },
      //     },
      //   },
      //   itemStyle: {
      //     normal: {
      //       color: {
      //         type: "linear",
      //         x: 0,
      //         y: 0,
      //         x2: 0,
      //         y2: 1,
      //         colorStops: [
      //           {
      //             offset: 0.05,
      //             color: "rgba(32,36,107, 0.2)",
      //           },
      //           {
      //             offset: 0.5,
      //             color: "rgba(32,36,107,0.3)",
      //           },
      //           {
      //             offset: 0.95,
      //             color: "rgba(32,36,107, 0.2)",
      //           },
      //         ],
      //       },
      //     },
      //   },
      //   labelLine: {
      //     normal: {
      //       show: false,
      //     },
      //   },
      //   data: [
      //     {
      //       value: 3235,
      //     },
      //   ],
      // },
      //最外层圈
      // {
      //   type: "pie",
      //   radius: ["0%", "85%"],
      //   center: ["50%", "50%"],
      //   avoidLabelOverlap: false,
      //   hoverAnimation: false,
      //   label: {
      //     normal: {
      //       show: false,
      //       position: "center",
      //     },
      //     emphasis: {
      //       show: false,
      //       textStyle: {
      //         fontWeight: "bold",
      //       },
      //     },
      //   },
      //   itemStyle: {
      //     normal: {
      //       color: {
      //         type: "linear",
      //         x: 0,
      //         y: 0,
      //         x2: 0,
      //         y2: 1,
      //         colorStops: [
      //           {
      //             offset: 0.05,
      //             color: "rgba(21,24,65, 0.2)",
      //           },
      //           {
      //             offset: 0.5,
      //             color: "rgba(21,24,65, 0.3)",
      //           },
      //           {
      //             offset: 0.95,
      //             color: "rgba(21,24,65, 0.2)",
      //           },
      //         ],
      //       },
      //     },
      //   },
      //   labelLine: {
      //     normal: {
      //       show: false,
      //     },
      //   },
      //   data: [
      //     {
      //       value: 3235,
      //     },
      //   ],
      // },
    ],
  });
  window.onresize = function () {
    //自适应大小
    chart.resize();
  };
  return { initChart };
}
</script>

<style lang="scss" scoped>
</style>